<template>
    <div class="result-all" v-if="result !== ''">
        <el-button @click="ToWord()" style="position:fixed;bottom:100px;right:30px;z-index:20;">导出为word</el-button>
        <el-button @click="ToPdf()" style="position:fixed;bottom:150px;right:30px;z-index:20;"> &nbsp导出为pdf&nbsp&nbsp </el-button>
        <div class="file-card">
            <img src="@/assets/软件信息查看.png" style="width:25px;position: absolute;top:25px;margin-left: 20px;" />
            <h3 style="position:absolute;top:23px;left:60px;">应用信息查看</h3>
            <el-avatar shape="square" :size="150" :src="picture" @error="errorHandler"
                style="position: absolute;top:80px;left:40px;">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
            </el-avatar>
            <div class="information"
                style="width:80%;height:85%;background-color: rgba(0, 0, 0, 0.45);border-radius: 10px;position: absolute;top:30px;left:235px;overflow-y: auto;">
                <img src="@/assets/文件信息.png" style="width:25px;position: absolute;top:15px;margin-left: 25px;" />
                <h4 style="position:absolute;top:15px;left:60px;">文件信息</h4>
                <div class="info"
                    style="position:absolute ;top:55px;left:25px;width:45%;overflow-y: auto;overflow-x: hidden;">
                    <div class="Tag">
                        <el-tag type="primary" class="tag">程序名称</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ result.file.fileName }}</span>
                    </div>
                    <div class="Tag">
                        <el-tag type="primary" class="tag">程序大小</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ result.file.size }}</span>
                    </div>
                    <div class="Tag">
                        <el-tag type="primary" class="tag">版本号</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ result.apk.targetVersion }}</span>
                    </div>
                    <div class="Tag">
                        <el-tag type="primary" class="tag">MD5</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ result.file.md5 }}</span>
                    </div>
                </div>
                <img src="@/assets/程序特征.png" style="width:25px;position: absolute;top:15px;margin-left: 525px;" />
                <h4 style="position:absolute;top:15px;left:560px;">程序特征</h4>
                <div class="info" style="position:absolute ;top:55px;left:530px;width:540px;">
                    <div class="Tag">
                        <el-tag type="primary" class="tag">应用名称</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ result.apk.apkName }}</span>
                    </div>
                    <div class="Tag">
                        <el-tag type="primary" class="tag">包名</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ result.apk.packageName }}</span>
                    </div>
                    <div class="Tag">
                        <el-tag type="primary" class="tag">签名</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ result.apk.fingerPrint }}</span>
                    </div>
                    <div class="Tag">
                        <el-tag type="primary" class="tag">检测结果</el-tag>
                        <span class="span" v-if="result !== ''">&nbsp;&nbsp;{{ type(result.apk.type) }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="ZhenShu-information">
            <img src="@/assets/证书信息查看.png" style="width:25px;position: absolute;top:25px;margin-left: 20px;" />
            <h3 style="position:absolute;top:23px;left:60px;">证书信息查看</h3>
            <div class="info"
                style="background-color:  rgba(0, 0, 0, 0.45);width: 90%;height:88%;border-radius: 10px;position:absolute;top:10%;left:5%;overflow-y: auto;">
                <pre style="color:white;position:absolute;top:20px;left:20px;">{{ cert }}</pre>
            </div>
        </div>
        <div class="QuanXian-information">
            <img src="@/assets/权限.png" style="width:25px;position: absolute;top:25px;margin-left: 20px;" />
            <h3 style="position:absolute;top:23px;left:60px;">应用程序权限</h3>
            <div style="background-color: rgba(0, 0, 0, 0.45);height:87%;width:95%;border-radius: 3px;position: absolute;top:70px;left:30px;overflow-y: auto;"
                class="canSX">
                <el-table class="quanXian-table" :data="displayedPermissions" height="565" stripe border
                    style="width: 100%;">
                    <el-table-column prop="name" label="权限名称" width="350" />
                    <el-table-column prop="level" label="安全等级" width="150">
                        <template #default="scope">
                            <el-tag class="table-tag" type="primary" v-if="scope.row.level === 'normal'">普通</el-tag>
                            <el-tag class="table-tag" type="danger" effect="dark"
                                v-else-if="scope.row.level === 'dangerous'">危险</el-tag>
                            <el-tag class="table-tag" type="success" effect="dark"
                                v-else-if="scope.row.level === '3'">签名</el-tag>
                            <el-tag class="table-tag" type="info" v-else>未知</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="权限内容" width="300" />
                    <el-table-column prop="describe" label="权限描述" width="495" />
                </el-table>
            </div>
        </div>
        <div class="detectionContext">
            <img src="@/assets/信息查看.png" style="width:25px;position: absolute;top:25px;margin-left: 20px;" />
            <h3 style="position:absolute;top:23px;left:60px;">反编译代码查看</h3>
            <div class="menu"
                style="position: absolute; background-color: rgba(0, 0, 0, 0.5);width:25%;height:89%;margin-top: 50px;margin-bottom: 15px;margin-left: 5px;margin-right: 5px;border-radius: 10px;overflow: auto;">
                <Directory class="file-menu" v-if="result !== ''" :originPath="result.originDecompiled"
                    @PutCode="PutCode" />
            </div>
            <div
                style="position: absolute;background-color: rgba(0, 0, 0, 0.5);width:72%;height:89%;margin-top: 50px;margin-bottom: 15px;margin-left: 360px;margin-right: 5px;border-radius: 10px;">
                <div style="position: absolute;left: 20px;top:7px;color:white;">{{ codeName }}</div>
                <ssh-pre class="code" :language="options.language" :dark="options.dark" :editable="options.editable"
                    :tab="options.tab">
                    {{ code }}
                </ssh-pre><!-- :label="options.label" -->
            </div>
        </div>
        <div class="ZhuaBaoInformation">
            <img src="@/assets/抓包信息查看.png" style="width:30px;position: absolute;top:22px;margin-left: 18px;" />
            <h3 style="position:absolute;top:23px;left:60px;">抓包信息查看</h3>
            <div style="position:absolute;top:20px;left:200px;">
                <el-button type="primary" plain @click="StartZhuaBao()">开启抓包</el-button>
                <el-button type="primary" plain @click="EndZhuaBao()">结束抓包</el-button>
                <el-button type="primary" plain @click="getZhuaBao()">更新</el-button>
            </div>
            <el-tag type="warning" style="position:absolute;top:20px;right:130px;height:30px;font-size:15px;">抓包状态：{{
        ZhuaBaoJudge }}</el-tag>
            <div
                style="position: absolute;background-color: rgba(0, 0, 0, 0.5);width:20%;height:88%;margin-top: 50px;margin-bottom: 15px;margin-left: 5px;margin-right: 5px;border-radius: 10px;overflow-y:auto;">
                <div class="ZhuaBaoMenu" v-for="(item, index) in ZhuaBaoInformation" :key="index"
                    style="position:relative;top:10px;height:30px;color:white;padding-top:3px;"
                    @click="ZhuaBaoContent = item.content; ZhuaBaoName = item.fileName;">
                    <span>&nbsp&nbsp&nbsp&nbsp&nbsp{{ item.fileName }}</span>
                </div>
            </div>
            <div
                style="position: absolute;background-color: rgba(0, 0, 0, 0.5);width:77%;height:88%;margin-top: 50px;margin-bottom: 15px;margin-left: 290px;margin-right: 5px;border-radius: 10px;">
                <div style="position: absolute;left: 20px;top:7px;color:white;">{{ ZhuaBaoName }}</div>
                <ssh-pre class="code" :dark="options.dark" :editable="options.editable" :tab="options.tab">
                    {{ ZhuaBaoContent }}
                </ssh-pre>
            </div>
        </div>
        <div class="BingDuYinQing">
            <img src="@/assets/蜘蛛.png" style="width:30px;position: absolute;top:22px;margin-left: 18px;" />
            <h3 style="position:absolute;top:23px;left:65px;">VIRUSTOTAL扫描</h3>
            <el-tag v-if="result !== ''" type="danger" style="position:absolute;top:25px;left:230px;">检出率：{{
        result.virusScannerBack.badScannerNumber }}/{{ result.virusScannerBack.total }}</el-tag>
            <div
                style="width: 96%;height:600px;background-color: rgba(0, 0, 0, 0.4);border-radius: 10px;position:absolute;left: 2%;top:65px;">
                <el-table class="table" :data="result.virusScannerBack.virusScannerArrayList" style="width: 100%;"
                    height="600">
                    <el-table-column fixed prop="scannerName" label="反病毒引擎" width="430" />
                    <el-table-column prop="scannerResult" label="检测结果" width="290"
                        :filters="[{ text: '非空', value: 0 }, { text: '空', value: 1 }]" :filter-method="filterT"
                        filter-placement="bottom-end">
                        <template #default="scope">
                            <el-tag type="danger" effect="dark" disable-transitions
                                style="height:30px;border:1px solid grey">{{ scope.row.scannerResult }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="scannerUpdate" label="更新时间" width="195" />
                    <el-table-column prop="scannerVersion" label="扫描工具版本" width="195">
                        <template #default="scope">
                            <el-tag type="success" disable-transitions style="height:30px;">{{ scope.row.scannerVersion
                                }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="judge" label="病毒引擎判断" width="200"
                        :filters="[{ text: '普通', value: 0 }, { text: '病毒引擎', value: 1 }]" :filter-method="filterTag"
                        filter-placement="bottom-end">
                        <template #default="scope">
                            <el-tag class="table-tag" type="primary" v-if="scope.row.judge === 0">普通</el-tag>
                            <el-tag class="table-tag" type="danger" effect="dark"
                                v-else-if="scope.row.judge === 1">病毒引擎</el-tag>
                            <el-tag class="table-tag" type="info" effect="dark" v-else>未知</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="detectionStatistics"> h
            <img src="@/assets/IP.png" style="width:30px;position: absolute;top:22px;margin-left: 18px;" />
            <h3 style="position:absolute;top:23px;left:65px;">IP 地图/域名检测</h3>
            <div class="Map"
                style="width: 96%;height:700px;background-color: rgba(0, 0, 0, 0.4);border-radius: 10px;position:absolute;left: 2%;top:60px;">
                <Map :Data="MapData"></Map>
            </div>
            <div style="position:absolute;left:3.5%;top:790px;">
                <el-table class="table" :data="result.urlList" style="width: 100%;" height="630">
                    <el-table-column fixed prop="urlPath" label="域名" width="400" />
                    <el-table-column prop="urlJudge" label="类型" width="150"
                        :filters="[{ text: 'ip', value: 0 }, { text: '域名', value: 1 }]" :filter-method="filterTag3">
                        <template #default="scope">
                            <el-tag class="table-tag" type="primary" v-if="scope.row.urlJudge === 0">IP地址</el-tag>
                            <el-tag class="table-tag" type="primary" v-else-if="scope.row.urlJudge === 1">域名</el-tag>
                            <el-tag class="table-tag" type="info" effect="dark" v-else>未知</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed prop="apkId" label="apkID" width="100" />
                    <el-table-column prop="first" label="纬度" width="230" />
                    <el-table-column prop="second" label="经度" width="230" />
                    <el-table-column prop="urlType" label="apk类型" width="150"
                        :filters="[{ text: '正常', value: 0 }, { text: '诈骗', value: 1 }, { text: '赌博', value: 2 }, { text: '涉黄', value: 3 }]"
                        :filter-method="filterTag2">
                        <template #default="scope">
                            <el-tag class="table-tag" type="primary" v-if="scope.row.urlType === 0">正常</el-tag>
                            <el-tag class="table-tag" type="danger" effect="dark"
                                v-else-if="scope.row.urlType === 1">诈骗</el-tag>
                            <el-tag class="table-tag" type="danger" effect="dark"
                                v-else-if="scope.row.urlType === 2">赌博</el-tag>
                            <el-tag class="table-tag" type="danger" effect="dark"
                                v-else-if="scope.row.urlType === 3">涉黄</el-tag>
                            <el-tag class="table-tag" type="info" effect="dark" v-else>未知</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class='List'>
            <div style="position:absolute;width:48%;background-color:rgba(250,250,250,0.25);height:46%;top:20px;left:20px;border-radius:5px;" class='list'>
                <img src="@/assets/活动.png" style="width:25px;position: absolute;top:15px;margin-left: 20px;" />
            <h3 style="position:absolute;top:13px;left:50px;color:black;">活动列表</h3>
            <div class="list">
                <h3 v-for="(item,index) in list12" style="position:relative;top:-8px;color: red;">{{item}}</h3>
                <h3 v-for="(item,index) in list1" style="position:relative;top:-8px;color: white;">{{item}}</h3>
            </div>
        </div>
            <div style="position:absolute;width:48%;background-color:rgba(250,250,250,0.25);height:46%;top:20px;right:20px;border-radius:5px;">
                <img src="@/assets/服务.png" style="width:25px;position: absolute;top:15px;margin-left: 20px;" />
            <h3 style="position:absolute;top:13px;left:50px;color:black;">服务列表</h3>
            <div class="list">
                <h3 v-for="(item,index) in list22" style="position:relative;top:-8px;color: red;">{{item}}</h3>
                <h3 v-for="(item,index) in list2" style="position:relative;top:-8px;color: white;">{{item}}</h3>
            </div>
        </div>
            <div style="position:absolute;width:48%;background-color:rgba(250,250,250,0.25);height:46%;bottom:20px;left:20px;border-radius:5px;">
                <img src="@/assets/广播接受者.png" style="width:25px;position: absolute;top:15px;margin-left: 20px;" />
            <h3 style="position:absolute;top:13px;left:50px;color:black;">广播接收者列表</h3>
            <div class="list">
                <h3 v-for="(item,index) in list32" style="position:relative;top:-8px;color: red;">{{item}}</h3>
                <h3 v-for="(item,index) in list3" style="position:relative;top:-8px;color: white;">{{item}}</h3>
            </div>
        </div>
            <div style="position:absolute;width:48%;background-color:rgba(250,250,250,0.25);height:46%;bottom:20px;right:20px;border-radius:5px;" >
                <img src="@/assets/提供者.png" style="width:25px;position: absolute;top:15px;margin-left: 20px;" />
            <h3 style="position:absolute;top:13px;left:50px;color:black;">内容提供者列表</h3>
            <div class="list">
                <h3 v-for="(item,index) in list42" style="position:relative;top:-8px;color: red;">{{item}}</h3>
                <h3 v-for="(item,index) in list4" style="position:relative;top:-8px;color: white;">{{item}}</h3>
            </div>
        </div>
         </div>
         <div class='IpDetection'>
            <img src="@/assets/IP检测.png" style="width:25px;position: absolute;top:25px;margin-left: 20px;" />
            <h3 style="position:absolute;top:23px;left:60px;">IP检测</h3>
            <div>
                <el-table class="table1" :data="ipInformation" style="width: 45%;position:absolute;top:60px;left:20px;" height="550">
                    <el-table-column fixed prop="ioc" label="ioc" width="150" />
                    <el-table-column prop="detail" label="中国境内" width="100"
                        :filters="[{ text: '否', value: true }, { text: '是', value: false}]" :filter-method="filterTag4">
                        <template #default="scope">
                            <el-tag class="table-tag" type="primary" v-if="scope.row.detail.isOverseas === true">否</el-tag>
                            <el-tag class="table-tag" type="primary" v-else-if="scope.row.detail.isOverseas === false">是</el-tag>
                            <el-tag class="table-tag" type="info" effect="dark" v-else>未知</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="详细信息" width="250">
                        <template #default="scope">
                            <div style="display: flex; flex-direction: column;">  
            <label style="color: black;position:absolute;top:0px;">国家: {{ scope.row.detail.country }}<br>地址: {{ scope.row.detail.address }}<br>经纬度: {{ scope.row.detail.lng }},{{ scope.row.detail.lat }}<br>isp: {{ scope.row.detail.isp }}</label>  

        </div> 
    </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="相关" min-width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click.prevent="GetRowDM(scope.row)">
                            相关代码
                        </el-button>
                    </template>
                </el-table-column>
                </el-table>
            </div>
            <div
                style="position: absolute;background-color: rgba(0, 0, 0, 0.5);width:50%;height:88%;margin-top: 50px;margin-bottom: 15px;margin-left: 660px;margin-right: 5px;border-radius: 10px;">
                <div style="position: absolute;left: 20px;top:7px;color:white;width:600px;overflow-x:hidden;">{{ lujing }}</div>
                <ssh-pre class="code" :dark="options.dark" :editable="options.editable" :tab="options.tab">
                    {{ xiangguandaima }}
                </ssh-pre>
            </div>
         </div>
        <div style="height:200px;width:100%;position: absolute;top:6230px;"></div>

    </div>
</template>
<script setup>
import Map from './Map.vue'
import Directory from '../main/file/Directory.vue'
import { useRoute } from 'vue-router';
import { onMounted, ref, reactive, computed } from 'vue'
import { serverAddress } from '@/config'
import axios from 'axios'
const route = useRoute();
const errorHandler = () => true
const softwareUrl = route.params.softwareUrl;
import { useStore } from 'vuex'
const store = useStore();
const MapData = ref([])
//获取apk检测信息
const result = ref('');
const picture = ref('')
const permissions = ref([])
const ipList=ref([])
const xiangguandaima=ref('')
const lujing=ref('')
//权限信息对比
const displayedPermissions = computed(() => {
    return permissions.value.map(name => {
        const permission = store.state.permissions.find(p => p.name === name);
        return {
            ...permission,
            // 如果没有找到对应的权限，则使用默认值  
            ...(permission ? {} : { level: '未知', content: '', describe: '' }),
            name, // 确保总是返回 name（但在这里它可能是多余的，因为 permission 对象应该已经包含 name）  
        };
    });
});
//证书英文转中文
function replaceChineseTerms(text) {
    return Object.keys(store.state.EnglishTo).reduce((acc, chineseTerm) => {
        return acc.replace(new RegExp(chineseTerm, 'g'), store.state.EnglishTo[chineseTerm]);
    }, text);
}
const cert = computed(() => {
    return replaceChineseTerms(result.value.cert);
});
const list1=ref([])
const list2=ref([])
const list3=ref([])
const list4=ref([])
const list12=ref([])
const list22=ref([])
const list32=ref([])
const list42=ref([])
onMounted(() => {
    console.log('apkName',softwareUrl);
    axios({
        // url: `${serverAddress}/apkUpload/getFilesReadyInformation?apkName=${softwareUrl}`,
        url: "https://apifoxmock.com/m2/4743995-0-default/190427172",
        method: "GET",
        // data: {
        //     apkName: softwareUrl.value
        // },
    }).then((Response) => {
        console.log("111")
        result.value = Response.data.data;
        picture.value = result.value.apk.picture;
        MapData.value = result.value.urlList.map(url => ({
            name: url.urlPath,
            value: [url.second, url.first] // 注意调整经纬度顺序  
        }));
        const parsedData = JSON.parse(result.value.reportContent);
        permissions.value = [...parsedData.permission, ...parsedData.dangerous_permission];
        list1.value=[...parsedData.manifest_analysis.activities.all]
        list2.value=[...parsedData.manifest_analysis.services.all]
        list3.value=[...parsedData.manifest_analysis.receivers.all]
        list4.value=[...parsedData.manifest_analysis.providers.all]
        list12.value=[...parsedData.manifest_analysis.activities.exported]
        list22.value=[...parsedData.manifest_analysis.services.exported]
        list32.value=[...parsedData.manifest_analysis.receivers.exported]
        list42.value=[...parsedData.manifest_analysis.providers.exported]
        ipList.value=[...parsedData.hardcoded_secrets]
        const iocs = ipList.value.map(secret => secret.ioc); 
        getIpInformation(iocs);
        cert.value = result.value.cert;

        console.log("result", result.value, 'MapData', MapData.value)
        console.log('权限', permissions.value)
    }).catch((error) => {
        console.log(error)
    })

})
//获取ip详细信息
const ipInformation=ref([])
function getIpInformation(list){
    axios({
        url:'https://apifoxmock.com/m2/4743995-0-default/194067293',
        // url:`${serverAddress}/apkUpload/ipListInformation`,
        method:'POST',
        data:{
            ipList:list,
        }
    }).then((response)=>{
        if(response.data.code===1){
            console.log('hui',response.data)
            ipList.value.forEach(a => {  
            let detail = response.data.data.find(detail => detail.ip === a.ioc);  
            // 如果找到了匹配的详情，则创建一个新对象并将其添加到结果数组中  
            if (detail) {  
            ipInformation.value.push({  
                ...a, // 复制原始 secret 对象  
                detail     // 添加匹配的详情作为新属性  
            });  
        }
        console.log('ipipip',ipInformation.value)
    });    
        }else{
            ElMessage({
                message: '获取失败',
                type: 'warning',
            })

        }
    }).catch((error)=>{
        ElMessage({
                message: '获取失败',
                type: 'warning',
            })
    })
}
//获取代码
function GetRowDM(row){
    console.log(result.value.originDecompiled+"\\"+row.path)
    lujing.value=result.value.splicingPath+"\\"+row.path;
    axios({
            url:'https://apifoxmock.com/m2/4743995-0-default/191330341',
            // url: `${serverAddress}/apkUpload/getCodeByPath`,
            method:'GET',
            params:{
                windowPath:lujing.value,
            }
        }).then((response)=>{
            console.log(response.data)
            xiangguandaima.value=response.data.data;
        }).catch((error)=>{
            
        })
}
const filterTag2 = (value, row) => {
    return row.urlType === value;
}
function type(type) {
    if (type === 0) {
        return '正常'
    }
    else if (type === 1) {
        return '诈骗'
    }
    else if (type === 2) {
        return '赌博'
    }
    else if (type === 3) {
        return '涉黄'
    }
    else {
        return '未知'
    }
}
const code = ref('')
const codeName = ref('')
//获取代码
function PutCode(context, name) {
    code.value = context;
    codeName.value = name;
    console.log('name', codeName.value)
}
//高亮代码
import SshPre from "simple-syntax-highlighter";
import "simple-syntax-highlighter/dist/sshpre.css";


const options = reactive({
    language: "js",
    //   label: codeName,
    dark: true,
    editable: true,
    tab: " ",
});

const props = defineProps({
    code: ""
});
//筛选
const filterTag = (value, row) => {
    return row.judge === value
}
const filterTag3 = (value, row) => {
    return row.urlJudge === value
}
const filterTag4=(value,row)=>{
    return row.isOverseas===value
}
const filterT = (value, row) => {
    if (value === 0)
        return row.scannerResult !== null
    else return row.scannerResult === null
}
//抓包
import { ElMessage, ElMessageBox } from 'element-plus'
const ZhuaBaoInformation = ref([])
function StartZhuaBao() {
    axios({
        url: 'https://apifoxmock.com/m2/4743995-0-default/191855962',
        // url: `${serverAddress}/apkUpload/getFiddlerStart`,
        method: 'GET',
        params: {
            packageName: result.value.apk.packageName,
            activityName: result.value.apk.activityName,
            apkWindowsPath: result.value.apkWindowsPath,
        }
    }).then((response) => {
        if (response.data.code === 1) {
            ZhuaBaoJudge.value = '进行中'
            ElMessage({
                message: '请求成功，请稍后',
                type: 'success',
            })
            getZhuaBao();
        } else {
            ElMessage({
                message: '请求错误，请重新请求',
                type: 'warning',
            })
        }
    }).catch((error) => {
        console.log('错误', error);
        ElMessage({
            message: '请求错误，请重新请求',
            type: 'warning',
        })
    })
}
//获取抓包信息/刷新
function getZhuaBao() {
    axios({
        url: 'https://apifoxmock.com/m2/4743995-0-default/191856023',
        // url: `${serverAddress}/apkUpload/getPackageRecourse`,
        method: 'GET',
    }).then((response) => {
        if (response.data.code === 1) {
            ZhuaBaoInformation.value = response.data.data;
            console.log('抓包信息', ZhuaBaoInformation.value);
        } else {
            ElMessage({
                message: '刷新失败',
                type: 'warning',
            })
        }
    }).catch(() => {

    })
}
function EndZhuaBao() {
    axios({
        url: 'https://apifoxmock.com/m2/4743995-0-default/191855976',
        // url: `${serverAddress}/apkUpload/getFiddlerEnd`,
        method: 'GET',
        params:{
            apkId:result.value.apk.apkId,
            packageName:result.value.apk.packageName,
        }
    }).then((response) => {
        if (response.data.code === 1) {
            ZhuaBaoJudge.value = '未开始'
            ElMessage({
                message: '抓包已结束',
                type: 'success',
            })
            getZhuaBao();
        } else {
            ZhuaBaoJudge.value = '未开始'
            ElMessage({
                message: '抓包已结束',
                type: 'success',
            })
        }
    }).catch((error) => {
        ZhuaBaoJudge.value = '未开始'
        console.log('错误', error);
        ElMessage({
                message: '抓包已结束',
                type: 'success',
            })
    })
}
const ZhuaBaoContent = ref('')
const ZhuaBaoName = ref('')
const ZhuaBaoJudge = ref('未开始')


import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import PizZipUtils from "pizzip/utils/index.js";
import { saveAs } from "file-saver";
import { Document, Paragraph, TextRun, Table, TableRow, TableCell, Packer } from 'docx';
const word=ref('')
const pdf=ref('')
function generateAndExport() {
    return new Promise((resolve, reject) => {
        const doc = new Document({
            sections: [{
                properties: {},
                children: [
                    new Paragraph({
                        text: softwareUrl, // 这里的 softwareUrl 需要定义或传入
                    }),
                    new Paragraph({
                        children: [
                            new TextRun({
                                text: `APK: `,
                                bold: true,
                            }),
                            new TextRun({
                                text: JSON.stringify(result.value, null, 2).replace(/\n/g, '\n'), // 这里的 result.value 需要定义或传入
                            }),
                        ],
                    }),
                    new Paragraph("\n"),
                ],
            }],
        });

        Packer.toBlob(doc).then(blob => {
            const formData = new FormData();
            console.log(blob)
            formData.append('file', blob, 'APK_Info.docx'); // 上传 Blob 数据，给定文件名
            console.log('formData',JSON.stringify(formData),Array.from(formData.keys),Array.from(formData.values))
            axios({
                url: 'https://apifoxmock.com/m2/4743995-0-default/194635101',
                // url:`${serverAddress}/apkUpload/wordToPDF?wordFile=${formData}`,
                method: 'POST',
            // params:{
            //     wordFile:formData,
            // } ,
                headers: {
                    'Content-Type': 'multipart/form-data', // 使用 multipart/form-data 提交文件
                }
            }).then(response => {
                if (response.data.code === 1) {
                    resolve({
                        wordUrl: response.data.data[0],
                        pdfUrl: response.data.data[1]
                    });
                } else {
                    reject(new Error('API响应错误'));
                }
            }).catch(error => {
                reject(error);
            });
        }).catch(error => {
            reject(error);
        });
    });
}

async function ToWord() {
    try {
        const { wordUrl } = await generateAndExport();
        console.log("Word URL:", wordUrl);
        window.open(wordUrl, '_blank');
    } catch (error) {
        console.error('ToWord函数执行出错:', error);
        // 处理错误，比如显示一个错误消息
    }
}

async function ToPdf() {
    try {
        const { pdfUrl } = await generateAndExport();
        console.log("PDF URL:", pdfUrl);
        window.open(pdfUrl, '_blank');
    } catch (error) {
        console.error('ToPdf函数执行出错:', error);
        // 处理错误，比如显示一个错误消息
    }
}


</script>
<style scoped>
.code {
    height: 92%;
    width: 98%;
    position: absolute;
    left: 1%;
    top: 20px;
    overflow: auto;
}

.Tag {
    margin-top: 12px;
}

.span {
    color: white;
    flex-wrap: wrap;
    display: inline-block;
    white-space: normal;
    max-width: 84%;
    word-break: break-word;
    overflow-wrap: break-word;
    flex-grow: 1;
    margin-left: 70px;
}

label {
    color: white;
    flex-wrap: wrap;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 1150px;
    height: 500px;
    position: absolute;
    top: 30px;
    left: 30px;
    line-height: 27px;
}

.tag {
    height: 25px;
    position: absolute;
}

.file-card {
    width: 95%;
    height: 295px;
    ;
    position: absolute;
    top: 10px;
    left: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    border-radius: 10px;
    padding: 10px;
}

.ZhenShu-information {
    width: 95%;
    height: 630px;
    position: absolute;
    top: 315px;
    left: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    border-radius: 10px;
    padding: 10px;
}

.QuanXian-information {
    width: 95%;
    height: 650px;
    position: absolute;
    top: 955px;
    left: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    border-radius: 10px;
    padding: 10px;
}

.detectionContext {
    width: 95%;
    height: 645px;
    position: absolute;
    top: 1615px;
    left: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    border-radius: 10px;
    padding: 10px;
}

.ZhuaBaoInformation {
    width: 95%;
    height: 645px;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    top: 2270px;
    left: 35px;
    border-radius: 10px;
    padding: 10px;
}

.detectionStatistics {
    width: 95%;
    height: 1450px;
    position: absolute;
    top: 3615px;
    left: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    border-radius: 10px;
    padding: 10px;
}

.BingDuYinQing {
    width: 95%;
    height: 680px;
    position: absolute;
    top: 2925px;
    left: 35px;
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0px 25px rgba(0, 20, 230, 0.6);
    border-radius: 10px;
    padding: 10px;
}
.List{
    width: 95%;
    height:630px;
    background-color:rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 5075px;
    left: 35px;
    border-radius:10px;
}
.IpDetection{
    width: 95%;
    height:630px;
    background-color:rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 5715px;
    left: 35px;
    border-radius:10px;
}
.list{
    overflow-y:auto;
    height:75%;
    width:90%;
    position:absolute;
    top:60px;
    left:30px;
}

.result-all {
    width: 100%;
    position: absolute;
    top: 65px;
    overflow-y: auto;
}

.result-all::-webkit-scrollbar {
    width: 5px;
}

h3,
h4 {
    color: white;
    position: relative;
    top: -10px;
    margin-bottom: 10px;
}

.menu::-webkit-scrollbar,
.canSX::-webkit-scrollbar,
.information::-webkit-scrollbar,
.info::-webkit-scrollbar,
.code::-webkit-scrollbar,
.list::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}

.el-table {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    opacity: 0.9;
    border-radius: 1px !important;
}

::v-deep(.el-table .el-table__header-wrapper th) {
    background-color: #ffffff;
    color: #717171;
    font-size: 15px;
    text-align: center;
}

::v-deep(.el-table .el-table__body-wrapper tr td) {
    background-color: #e0e0e0;
    color: #969696;
    font-size: 15px;
    font-weight: 500;
}

.table-tag {

    position: relative;
    left: 15px;
}

::v-deep(.el-table__row) {
    height: 50px;
    /* 设置你需要的行高 */
    line-height: 55px;
    /* 可选，使文本垂直居中 */
}
::v-deep(.table1 .el-table__row) {
    height: 120px;
    /* 设置你需要的行高 */
    line-height: 55px;
    /* 可选，使文本垂直居中 */
}
.table .el-table .cell {
    color: black;
}

.ZhuaBaoMenu:hover {
    background-color: white;
    color: black !important;
}
</style>
